import React from 'react'

import { Color } from '../model/color'  //model 模型层

interface Props{
    // 每个组件都需要做自己的类型约束，没有共享的必要
    // 数据由父组件管理
    color:Color;
    onColorUpdated:(color:Color)=>void
}
const ColorPicker: React.FC<Props> = (props)=>{
    const {color,onColorUpdated} =props
    return <>
        <input type="range"
          min="0"
          max="255"
          value={color.red}
          onChange={event=>{
              onColorUpdated({
                  ...color,
                  red: +event.target.value
              }
              ) 
          }}
        />
        {'red:'+color.red}
        <br />
        <input type="range"
          min="0"
          max="255"
          value={color.green}
          onChange={event=>{
              onColorUpdated({
                  ...color,
                  green: +event.target.value
              }
              ) 
          }}
        />
        {"green:"+color.green}
        <br />
        <input type="range"
          min="0"
          max="255"
          value={color.blue}
          onChange={event=>{
              onColorUpdated({
                  ...color,
                  blue: +event.target.value
              }
              ) 
          }}
        />
        {"blue:"+color.blue}
    </>
}

export default ColorPicker